<script setup lang="ts">
import EnergyUnitCascader from '@/components/EnergyUnitCascader/EnergyUnitCascader.vue'
import ContainSubRadio from '@/components/ContainSubRadio/ContainSubRadio.vue'
import { CONTAIN_SUB } from '@/enum/modules/public'
import TotalChart from './components/TotalChart.vue'
import DetailsChart from './components/DetailsChart.vue'
import { STORAGE_MODES } from '@/enum/modules/indicator'
import { useTimeTypeFormat } from '@/mixins/MixinTimeTypeFormat'

import { useLoadData } from './composable'

const {
  totalData,
  detailsData,
  dataTotal,
  dataDetails,
} = useLoadData()

const pointId = ref<number>()
const includeSub = ref(CONTAIN_SUB.ALL_SUB)
const queryText = ref('')

const {
  timeType,
  dataTime,
  pickerType,
  pickerFormat,
} = useTimeTypeFormat()
// async function whenPointLoaded(id: number) {
//   pointId.value = id
//   await nextTick()
//   clickSearch()
// }

async function clickSearch() {
  const params = {
    pointId: unref(pointId)!,
    timeType: unref(timeType),
    dataTime: unref(dataTime),
    queryText: unref(queryText),
    isVirtually: unref(includeSub),
  }

  if (params.timeType && params.dataTime) {
    dataTotal(params)
    dataDetails(params)
  }
}

onMounted(() => {
  clickSearch()
})
</script>

<template>
  <div class="h-full w-full flex flex-col p-4">
    <div class="fs-14 flex flex-nowrap items-center gap-3">
      <span>用能单元</span>
      <EnergyUnitCascader v-model="pointId" class="!max-w-55" />
      <ContainSubRadio v-if="pointId" v-model="includeSub" />
      <span>名称</span>
      <ElInput v-model="queryText" clearable class="!max-w-40" />
      <span>统计类型</span>
      <ElSelect v-model="timeType" class="ml-3 !w-24">
        <ElOption label="日" :value="STORAGE_MODES.DAY" />
        <ElOption label="月" :value="STORAGE_MODES.MONTH" />
        <ElOption label="年" :value="STORAGE_MODES.YEAR" />
      </ElSelect>
      <ElDatePicker v-model="dataTime" class="-ml-3" :type="pickerType" :value-format="pickerFormat" :format="pickerFormat" />
      <SearchButton @click="clickSearch" />
    </div>
    <div class="alpha-block position-relative mt-4 h-90 w-full flex-shrink-0">
      <TotalChart v-if="totalData" :data="totalData" />
    </div>
    <div class="alpha-block position-relative mt-4 flex-auto overflow-auto">
      <DetailsChart v-if="detailsData" :data="detailsData" />
    </div>
  </div>
</template>
